<template>
    <div>
        <Title :title="title"></Title>
       
        <div ref="bottom1" style="height: 190px; width: 100%;"></div>
    </div>
</template>
<script>
// 引入玫瑰图构造函数
import { Rose } from '@antv/g2plot';
import { mapState } from 'vuex';
// import Title from './Title.vue';

export default {
    data() {
        return {
            title: '服务事项概览',
            // 存放服务事项数据
            serviceData: [],
            rose: null
        }
    },
    computed: {
        ...mapState(['ed'])
    },
    watch: {
        ed: {
            handler(n, o) {
                this.generateMockData();
                if (this.rose) {
                    this.rose.changeData(this.serviceData);
                }
            },
            deep: true
        }
    },
    methods: {
        loadRose() {
            this.rose = new Rose(this.$refs.bottom1, {
                data: this.serviceData,
                padding:8,
                xField: 'type',
                yField: 'value',
                seriesField: 'type',
                radius: 0.8,
                legend: {
                    position: 'bottom',
                    label: {
                        style: {
                            fill: "white",
                            fontSize: 12
                        }
                    }
                },
                sectorStyle: {
                    fillOpacity: 0.8,
                    stroke: '#fff',
                    lineWidth: 1
                },
                label: {
                    visible: true,
                    style: {
                        fill: "#fff",
                        fontSize: 12,
                        fontWeight: '500'
                    }
                },
                animation: {
                    appear: {
                        animation: 'fade-in',
                        duration: 1500,
                    },
                },
                tooltip: {
                    domStyles: {
                        "g2-tooltip": {
                            background: '#147',
                            color: "white",
                            fontSize: 14,
                            padding: 10
                        }
                    },
                    formatter: (datum) => {
                        return {
                            name: datum.type,
                            value: `${datum.value} 项`
                        };
                    }
                },
                interactions: [{ type: 'element-active' }]
            });
            this.rose.render();
        },
        generateMockData() {
            const baseValues = {
                'public': 30,
                'industry': 25,
                'professional': 20,
                'disaster': 28
            };
            
            const randomFactor = 0.1; // 10%的随机波动
            
            this.serviceData = [
                { 
                    type: '公共气象服务', 
                    value: Math.round(baseValues.public * (1 + (Math.random() - 0.5) * randomFactor))
                },
                { 
                    type: '行业气象服务', 
                    value: Math.round(baseValues.industry * (1 + (Math.random() - 0.5) * randomFactor))
                },
                { 
                    type: '专业气象服务', 
                    value: Math.round(baseValues.professional * (1 + (Math.random() - 0.5) * randomFactor))
                },
                { 
                    type: '气象灾害防御服务', 
                    value: Math.round(baseValues.disaster * (1 + (Math.random() - 0.5) * randomFactor))
                }
            ];
        }
    },
    mounted() {
        this.generateMockData();
        this.loadRose();
    }
}
</script>
<style lang="less" scoped></style>
